﻿<style>
    .bui-dialog-foot-nav {
        bottom: 1rem;
        display: none;
    }
</style>
<div class="bui-page">
    <header>
        <div class="bui-bar">
            <div class="bui-bar-left">
                <a class="bui-btn btn-back"><i class="icon-back"></i></a>

            </div>
            <div class="bui-bar-main">导航菜单</div>
            <div class="bui-bar-right">
            </div>
        </div>
        <!-- 横向滚动导航 -->
        <div class="bui-navbar">
            <ul class="bui-nav">
                <li class="bui-btn active">首页</li>
                <li class="bui-btn">新闻</li>
                <li class="bui-btn">图片</li>
                <li class="bui-btn">视频</li>
                <li class="bui-btn">视频</li>
                <li class="bui-btn">视频</li>
                <li class="bui-btn">视频</li>
                <li class="bui-btn">视频</li>
                <li class="bui-btn">视频</li>
            </ul>
        </div>
    </header>

    <main>

        <h3 class="section-title">文本导航菜单</h3>
        <ul class="bui-nav">
            <li class="bui-btn active">首页</li>
            <li class="bui-btn">新闻</li>
            <li class="bui-btn">图片</li>
            <li class="bui-btn">视频</li>
        </ul>
        <h3 class="section-title">水平图标居左导航菜单</h3>
        <ul class="bui-nav">
            <li class="bui-btn bui-box active"><i class="icon-home"></i>
                <div class="span1">首页</div>
            </li>
            <li class="bui-btn bui-box"><i class="icon-home"></i>
                <div class="span1">新闻</div>
            </li>
            <li class="bui-btn bui-box"><i class="icon-home"></i>
                <div class="span1">图片</div>
            </li>
            <li class="bui-btn bui-box"><i class="icon-home"></i>
                <div class="span1">视频</div>
            </li>
        </ul>

        <h3 class="section-title">纵向图标导航菜单</h3>
        <ul class="bui-nav">
            <li class="bui-btn bui-box-vertical active"><i class="icon-home"></i>
                <div class="span1">首页</div>
            </li>
            <li class="bui-btn bui-box-vertical"><i class="icon-home"></i>
                <div class="span1">新闻</div>
            </li>
            <li class="bui-btn bui-box-vertical"><i class="icon-home"></i>
                <div class="span1">图片</div>
            </li>
            <li class="bui-btn bui-box-vertical"><i class="icon-home"></i>
                <div class="span1">视频</div>
            </li>
        </ul>

        <h3 class="section-title">纵向图标导航菜单</h3>
        <!-- 如果使用图片,路径为 images/icons/icon-nav01.png images/icons/icon-nav01-active.png -->
        <ul class="bui-nav">
            <li class="bui-btn bui-box-vertical active"><i class="icon-nav01">&#xe659;<span class="bui-badges">15</span></i>
                <div class="span1">首页</div>
            </li>
            <li class="bui-btn bui-box-vertical"><i class="icon-nav02">&#xe659;</i>
                <div class="span1">新闻</div>
            </li>
            <li class="bui-btn bui-box-vertical"><i class="icon-nav03">&#xe659;<span class="bui-badges"></span></i>
                <div class="span1">图片</div>
            </li>
            <li class="bui-btn bui-box-vertical"><i class="icon-nav04">&#xe659;</i>
                <div class="span1">更多</div>
            </li>
        </ul>

    </main>
    <footer>
        <ul class="bui-nav">
            <li class="bui-btn bui-box-vertical active"><i class="icon-home"><span class="bui-badges">15</span></i>
                <div class="span1">首页</div>
            </li>
            <li class="bui-btn bui-box-vertical"><i class="icon-home"></i>
                <div class="span1">新闻</div>
            </li>
            <li class="bui-btn bui-box-vertical"><i class="icon-home"><span class="bui-badges"></span></i>
                <div class="span1">图片</div>
            </li>
            <li class="bui-btn bui-box-vertical bui-btn-more"><i class="icon-home"></i>
                <div class="span1">更多</div>
            </li>
        </ul>
    </footer>
</div>
<div id="uiDialogNav" class="bui-dialog bui-dialog-foot-nav">
    <ul class="bui-nav">
        <li class="bui-btn bui-box"><i class="icon-home"></i>
            <div class="span1">首页</div>
        </li>
        <li class="bui-btn bui-box"><i class="icon-home"></i>
            <div class="span1">新闻</div>
        </li>
        <li class="bui-btn bui-box"><i class="icon-home"></i>
            <div class="span1">图片</div>
        </li>
        <li class="bui-btn bui-box"><i class="icon-home"></i>
            <div class="span1">视频</div>
        </li>
    </ul>
</div>